<!--
 * @Description: 关于我们
 * @Version: 2.0
 * @Autor: Seven
 * @Date: 2020-12-07 14:34:44
 * @LastEditors: Seven
 * @LastEditTime: 2020-12-15 13:34:27
-->
<template>
    <div class="about-wrap">
        <div class="images-title">
            <img src="/images/example/aboutUs.png" alt="" />
        </div>

        <div class="floor">
            <div class="containers">
                <floor-title
                    title="平台介绍"
                    subtitle="PLATFORM IS INTRODUCED"
                ></floor-title>
                <div class="floor-wrap">
                    <div class="abouts-wrap">
                        <el-row :gutter="20">
                            <el-col :xs="24" :sm="12">
                                <div class="img-box">
                                    <img
                                        src="/images/example/about.png"
                                        alt=""
                                    />
                                </div>
                            </el-col>
                            <el-col :xs="24" :sm="12">
                                <div class="abouts-info">
                                    <div class="item">
                                        <div class="j-title">
                                            <span
                                                class="iconfont el-icon-caret-right"
                                            ></span>
                                            <span
                                                >淘乐教师招考教育核心优势</span
                                            >
                                        </div>
                                        <div class="s">
                                            湖南淘乐教师招考教育获得了广大考生、学子的认可，并在业界树立了良好的口碑和公
                                            信力。自成立以来，学校累积培训学员达65000人，考试通过率达85%以上，稳居行业
                                            之首。考教师就选淘乐教师招考，已成为湖南学子的不二选择。
                                        </div>
                                    </div>
                                    <div class="item">
                                        <div class="j-title">
                                            <span
                                                class="iconfont el-icon-caret-right"
                                            ></span>
                                            <span
                                                >淘乐教师招考教育学校简介</span
                                            >
                                        </div>
                                        <div class="s">
                                            2000年4月湖南淘乐教师招考教育于长沙成立，学校一直秉承“专注、专业、诚信、创
                                            新”为服务理念，致力于中国职业类考试培训、教师资格证、教师考编培训事业的发展。
                                            学校历经15年的发展，一直领跑于教师资格证考试、教师考编培训领域获得了广大考
                                            生、学子的认可，并在业界树立了良好的口碑和公信力。
                                            如今，淘乐教师招考教育发展规模越来越大，每年培训学员近万，作为国内较专业、规
                                            模较大的教师考编培训机构，我们有理由、也有信心在教育培训、教师资格考试、教师
                                            考编领域做得更好、更专业。
                                            品牌创造未来，相信淘乐教师招考
                                        </div>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
        </div>

        <div class="floor">
            <div class="containers">
                <floor-title
                    title="推荐老师"
                    subtitle="RECOMMEND THE"
                ></floor-title>
                <div class="floor-wrap">
                    <div class="teacher-wrap">
                        <el-row :gutter="20">
                            <el-col
                                :xs="12"
                                :sm="8"
                                v-for="(item, index) in teacherList"
                                :key="index"
                            >
                                <teacher-card :data="item"></teacher-card>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
        </div>

        <div class="floor">
            <div class="containers">
                <floor-title
                    title="热门课程"
                    subtitle="POPULAR COURSE"
                ></floor-title>
                <div class="floor-wrap">
                    <div class="teacher-wrap">
                        <el-row :gutter="20">
                            <el-col
                                :xs="12"
                                :sm="8"
                                :md="6"
                                :lg="6"
                                v-for="(item, index) in PopularCourses"
                                :key="index"
                                v-if="index < 4"
                            >
                                <course-box :data="item"></course-box>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            teacherList: [],
            PopularCourses: [],
        };
    },
    async asyncData({ app }) {
        // 好课推荐
        let getRecommendList = app.$axios
            .$get(`/edu/course/courseRecommend`)
            .then((res) => {
                if (res.code === 0) {
                    return res.data;
                }
            });
        // 教师推荐
        let getTeacherList = app.$axios
            .$get(`/edu/teacher/teacherRecommend`)
            .then((res) => {
                if (res.code === 0) {
                    return res.data;
                }
            });
        let PopularCourses = await getRecommendList;
        let teacherList = await getTeacherList;
        return {
            PopularCourses,
            teacherList
        };
    },
};
</script>
<style lang="scss" scoped>
.floor {
    &:nth-of-type(even) {
        background-color: #eaecf5;
    }
    padding: 50px 0 80px;
    background-color: #f5f6fb;
    .floor-wrap {
        margin-top: 40px;
    }
}
.abouts-wrap {
    background: #fff;
    width: 100%;
    padding: 20px;
    .img-box {
        img {
            width: 100%;
        }
    }
    .abouts-info {
        .item {
            & + .item {
                margin-top: 28px;
            }
            .j-title {
                font-size: 14px;
                color: $--color-primary;
                display: flex;
                align-items: center;
                .iconfont {
                    margin-right: 10px;
                }
            }
            .s {
                color: #66798a;
                margin-top: 28px;
                line-height: 1.5;
                padding-left: 25px;
            }
        }
    }
}
</style>